{% extends "tj3/base.html" %}

{% block navigation %}
    <script type="text/javascript">
    $('document').ready(function(){
        $('#mymodal').hide();
		$('#start').datepicker();
		$('#end').datepicker();
		        
		$('#create_btn').click(function(){
			var proj_id;
			var name;
			var description;
			var start;
			var end;
						
			name=$('#name').val();
			description=$('textarea[name=description]').val();
			start=$('#start').val();
			end=$('#end').val();
			
			// Post the new event to the server!
			var json_event=$.toJSON({'name':name, 'description':description, 'start':start, 'end':end});
			$.post("{% url project_create %}",
			{'data':json_event},
			function (data){
				//alert(data);
				window.location.replace('/mysite/tj3');
			});             
		});    
		
		$('#create_project').click(function(){
			$("#mymodal").modal({
				opacity:80,
				overlayCss: {backgroundColor:"#fff"}
			});
		});
		
		$('#create_project').button();
		$('#comment').button();
		$('#myList').listnav({
			initLetter: 'a', 
			includeAll: true, 
			includeOther: true, 
			flagDisabled: false, 
			noMatchText: 'Nothing matched your filter, please click another letter.', 
			showCounts: true, 
			cookieName: 'my-main-list', 
			onClick: function(letter){}, 
			prefixes: ['the','a'] 		
		});
	});
    </script>
{% endblock navigation %}

{% block content  %}

<div class="prefix-6">
	<a href="#" id="create_project">Create a New Project</a>
	<a href="{% url comment %}" id="comment">How Could We Make It Better?</a>
</div>
<br />
<br />

<div id="myList-nav">
	<ul id="myList">
	{% for p,scenarios,task_count,people in projects %}
		<li><h2 class="ui-state-highlight ui-corner-all span-14">{{p.name}}</h2>
		
		<div>
			<div class="span-14">
			{{p.description}}
			</div>
			<div class="fancy">
				<table class="">
					<tr>
						<td>Baseline:</td>
						<td><a href="{% url task_hierarchy p.id %}">{{p.scenario.name|capfirst}}</a>
					</tr>
					<tr>
						<td>Execution Scenarios:</td>
						<td>
							<!--- children scenarios --->
							{% for s in scenarios %}
								<a href="{% url project_main_actual p.id,s.id %}">{{s.name|capfirst}}</a>
							{% endfor %}
						</td>
					</tr>
					<tr><td>Start Date:<td>{{p.start}}</tr>
					<tr><td>End Date:<td>{{p.end}}</tr>
					<tr><td>Total Tasks:<td>{{task_count}}</tr>
					<tr><td>Resources:
						<td>
							{% for who in people %}
								{{who.primary.first_name|capfirst}} {{who.primary.last_name|capfirst}}<br>
							{% endfor %}
					</tr>
				</table>
			</div>
		</div>
	{% endfor %}
	</ul>

</div>


<div id="mymodal" style="color:white;">
	<label>Name</label><br />
		<input id="name" type="text" value="" /><br />
	<label>Description</label><br />
		<textarea name="description" rows="5" cols="20"></textarea><br />
	<label>Start</label><br />
		<input id="start" type="text" value="" /><br />
	<label>End</label><br />
		<input id="end" type="text" value="" /><br />
	
	<div class="float_right">
		<input type="button" id="create_btn" value="Create" class="simplemodal-close" />
		<input type="button" id="cancel_btn" value="Cancel" class="simplemodal-close" />
	</div>
</div>
{% endblock content %}
